// src/components/createAccount/CreateAccountCard.tsx

import { useState, useEffect } from 'react';
import CreateAccountHeader from '@/components/createAccount/CreateAccountHeader';
import CreateAccountForm from '@/components/createAccount/CreateAccountForm';

const CreateAccountCard = () => {
  const [isSmallScreen, setIsSmallScreen] = useState(false);
  const [isMediumScreen, setIsMediumScreen] = useState(false);

  useEffect(() => {
    const checkScreenSize = () => {
      const width = window.innerWidth;
      setIsSmallScreen(width < 640);
      setIsMediumScreen(width >= 640 && width < 768);
    };
    checkScreenSize();
    window.addEventListener('resize', checkScreenSize);
    return () => window.removeEventListener('resize', checkScreenSize);
  }, []);

  return (
    <section
      className={`bg-white dark:bg-slate-900 rounded-3xl shadow-2xl w-full border border-gray-100 dark:border-slate-700 ${isSmallScreen
          ? 'p-6'
          : isMediumScreen
            ? 'p-8'
            : 'p-10'
        }`}
      aria-labelledby="register-header"
    >
      {/* Header section */}
      <CreateAccountHeader />
      {/* Form section */}
      <CreateAccountForm />
    </section>
  );
};

export default CreateAccountCard;